<template>
  <div>
    <a-spin :spinning="spinning">
      <!-- 顶部 -->
      <div class="top flexAround">
        <div class="top_content">
          <div class="top_content_title">劳务单位</div>
          <div class="top_content_content">{{this.topInfo.labourTotal}}</div>
        </div>
        <div class="top_content">
          <div class="top_content_title">施工班组</div>
          <div class="top_content_content">{{this.topInfo.teamTotal}}</div>
        </div>
        <div class="top_content">
          <div class="top_content_title">在场人数</div>
          <div class="top_content_content">{{this.topInfo.inPersonTotal}}</div>
        </div>
      </div>

      <div class="center flexBetween">
        <div class="left">
          <div class="flexBetween" style="margin-bottom:15px">
            <div style="font-size:18px">劳务单位列表</div>
            <div style="font-size:16px;cursor: pointer;color:#1890ff" @click="newAdd">新建</div>
          </div>
          <div class="list">
            <ul>
              <li v-for="(item,index) in list" :key="index">
                <div class="li_content" :class="{activeLi:item.check}" @click="clickli(item)">
                  <div class="list_title" :class="{activeTitle:item.check}">{{item.title}}</div>
                  <div class="flexBetween">
                    <div
                      class="list_content"
                      :class="{activeContent:item.check}"
                    >施工班组：{{item.group}}</div>
                    <div
                      class="list_content"
                      :class="{activeContent:item.check}"
                    >在场人员：{{item.person}}</div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="right" v-if="!isdelete">
          <a-spin :spinning="spinningRight">
          <div class="flexBetweenCenter" style="margin-bottom:20px">
            <div class="unitTitle">{{this.formUnit.name}}</div>
            <div>
              <a-dropdown-button>
                <a-menu slot="overlay" @click="handleMenu">
                  <a-menu-item key="1">
                    <a-icon type="edit" />编辑
                  </a-menu-item>
                  <a-menu-item key="2">
                    <a-icon type="delete" />删除
                  </a-menu-item>
                </a-menu>
              </a-dropdown-button>
            </div>
          </div>

          <!-- 表单 -->
          <div class="aform divPadding">
            <a-form-model ref="ruleForm" layout="inline" :model="formUnit" labelAlign="left">
              <a-form-model-item
                ref="creditCode"
                label="统一社会信用代码"
                prop="creditCode"
                style="width:45%"
              >{{formUnit.creditCode}}</a-form-model-item>
              <a-form-model-item
                ref="type"
                label="承包类型"
                prop="type"
                style="width:45%"
              >{{formUnit.type}}</a-form-model-item>
              <a-form-model-item
                ref="manager"
                label="负责人"
                prop="manager"
                style="width:45%"
              >{{formUnit.manager}}</a-form-model-item>
              <a-form-model-item
                ref="date"
                label="合同时间"
                style="width:45%"
              >{{formUnit.contractStartDate}} ~ {{formUnit.contractEndDate}}</a-form-model-item>
              <a-form-model-item ref="contract" label="分包合同" style="width:45%">
                <div
                  style="color:#1890ff;cursor:pointer"
                  v-for="(item,index) in formUnit.contractFileInfoList"
                  :key="index"
                 @click="pdfModal(item)"
                >{{item.fileName}}</div>
              </a-form-model-item>
              <a-form-model-item ref="payment" label="委托工资支付协议" style="width:45%">
                <div
                  style="color:#1890ff;cursor:pointer"
                  v-for="(item,index) in formUnit.paymentPackageIdFileInfoList"
                  :key="index"
                >{{item.fileName}}</div>
              </a-form-model-item>
            </a-form-model>
          </div>
          <div class="flexBetweenCenter" style="margin-bottom:15px">
            <div style="font-size:18px;margin-left:20px">施工班组信息</div>
            <div>
              <a-button type="primary" @click="relationGroup">关联班组</a-button>
            </div>
          </div>
          <div class="atable">
            <a-table :columns="columns" :data-source="data">
              <span slot="action" slot-scope="text, record">
                <a style="color:#1890FF" @click="onShow(text, record)">查看人员</a>
                <a style="color:#1890FF;margin-left:10px" @click="onSet(text, record)">设置班组长</a>
                <a style="color:#1890FF;margin-left:10px" @click="onEdit(text, record)">编辑</a>
                <a-popconfirm
                  title="确认取消关联"
                  ok-text="确认"
                  cancel-text="取消"
                  @confirm="confirm(text,record)"
                  @cancel="cancel"
                >
                  <a style="color:#1890FF;margin-left:10px">取消关联</a>
                </a-popconfirm>
              </span>
            </a-table>
          </div>
          </a-spin>
        </div>
      </div>
      <!-- 对话框 -->
      <div>
        <a-modal
          v-model="visible"
          :title="modalTitle"
          @ok="clickConfirm"
          :maskClosable="false"
          cancelText="取消"
          okText="确认"
          class="aModal"
        >
          <div v-if="modalTitle=='关联班组'">
            <div style="margin-bottom:10px">
              请选择以下班组进行关联：
              <span style="color:red">(施工班组信息请在平安守护系统中维护)</span>
            </div>
            <a-radio-group v-model="value" @change="radioChange">
              <a-radio
                :style="radioStyle"
                :value="item.value"
                v-for="(item,index) in teamGroup"
                :key="index"
              >{{item.name}}</a-radio>
            </a-radio-group>
          </div>

          <div v-if="modalTitle=='新建劳务单位'||modalTitle=='编辑劳务单位'">
            <a-form-model
              ref="ruleForm"
              :model="modalForm1"
              v-if="visible"
              :rules="rules"
         
            >
                 <!-- :label-col="labelCol"
              :wrapper-col="wrapperCol" -->
              <a-form-model-item ref="type" label="承包类型" prop="type">
                <a-select
                  v-if="modalTitle=='新建劳务单位'"
                  label-in-value
                  @change="selectChange"
                  placeholder="请选择"
                >
                  <a-select-option
                    v-for="(item,index) in modalForm1.type "
                    :key="index"
                    :value="item.key"
                  >{{item.lable}}</a-select-option>
                </a-select>
                <a-select
                  v-if="modalTitle!='新建劳务单位'"
                  label-in-value
                  :default-value="this.modalForm1.defaultValue"
                  placeholder="请选择"
                  @change="selectChange"
                >
                  <a-select-option
                    v-for="(item,index) in modalForm1.type "
                    :key="index"
                    :value="item.key"
                  >{{item.lable}}</a-select-option>
                </a-select>
              </a-form-model-item>

              <a-form-model-item ref="name" label="单位名称" prop="name">
                <a-input placeholder="请输入单位名称" v-model="modalForm1.name"></a-input>
              </a-form-model-item>

              <a-form-model-item ref="creditCode" label="统一社会信用代码" prop="creditCode">
                <a-input placeholder="请输入统一社会信用代码" v-model="modalForm1.creditCode"></a-input>
              </a-form-model-item>

              <a-form-model-item ref="manager" label="单位负责人" prop="manager">
                <a-input placeholder="请输入单位负责人" v-model="modalForm1.manager"></a-input>
              </a-form-model-item>

              <div
                style="font-size:18px;color:#000;margin-bottom: 5px;margin-top: 5px;"
              >合同信息</div>
              <a-form-model-item ref="time" label="合同时间" prop="time">
                <a-range-picker @change="timeChange" v-model="modalForm1.time" style="width:100%">
                  <a-icon slot="suffixIcon" type="calendar" />
                </a-range-picker>
              </a-form-model-item>
              <a-form-model-item ref="subcontract" label="分包合同" prop="subcontract">
                <a-upload
                  name="file"
                  accept=".pdf"
                  :multiple="true"
                  :remove="handleRemove"
                  :before-upload="beforeUpload"
                  :default-file-list="defaultFileList"
                >
                  <a-button>
                    <a-icon type="upload" />上传文件
                  </a-button>
                  <div style="color:#ccc">请上传pdf文件</div>
                </a-upload>
              </a-form-model-item>
              <a-form-model-item ref="paymentContract" label="委托公司支付协议" prop="paymentContract">
                <a-upload
                  name="file"
                  accept=".pdf"
                  :multiple="true"
                  :remove="handleRemove2"
                  :before-upload="beforeUpload2"
                  :default-file-list="defaultFileList2"
                >
                  <a-button @click="flag='ccccccc'">
                    <a-icon type="upload" />上传文件
                  </a-button>
                  <div style="color:#ccc">请上传pdf文件</div>
                </a-upload>
              </a-form-model-item>
            </a-form-model>
          </div>

          <div v-if="modalTitle=='设置班组负责人'">
            <a-form-model
              ref="ruleForm2"
              :model="modalForm2"
              v-if="visible"
             
            >
            <!-- :label-col="labelCol"
              :wrapper-col="wrapperCol" -->
              <a-form-model-item ref="charge" label="班组负责人" prop="charge">
                <a-select
                  mode="default"
                  size="default"
                  placeholder="请选择"
                  :default-value="[]"
                  @change="setGroupChange"
                >
                  <a-select-option v-for="i in charge" :key="i.label">{{ i.value}}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-form-model>
          </div>

          <div v-if="modalTitle=='编辑班组'">
            <a-form-model
              ref="ruleForm3"
              :model="modalForm3"
              v-if="visible"
             
            >
             <!-- :label-col="labelCol"
              :wrapper-col="wrapperCol" -->
              <a-form-model-item ref="name" label="班组名称" prop="name">
                <a-input v-model="modalForm3.name"></a-input>
              </a-form-model-item>
            </a-form-model>
          </div>
        </a-modal>
      </div>

      <!-- 删除对话框 -->
      <div class="amodal">
        <a-modal
          v-model="visibleDelete"
          title="删除"
          :maskClosable="false"
          width="645px"
          style="height:400px"
          :footer="null"
        >
          <div
            class="tipWord"
          >正在删除 {{this.formUnit.name}}，该操作不可逆，一旦操作成功，{{this.formUnit.name}}的数据将会删除。请输入下面内容再次确认操作。</div>
          <div style="margin-bottom:10px">请在下发输入框输入“{{this.formUnit.name}}”以确认操作</div>
          <div style="margin-bottom:30px">
            <a-input v-model="formDelete.content" :placeholder="'请输入'+this.formUnit.name" />
          </div>
          <div>
            <a-button style="color:red;width:100%;margin-bottom:30px" @click="checkDelete">确认删除</a-button>
          </div>
        </a-modal>
      </div>

      <!-- pdf对话框 -->
      <div>
        <a-modal
          v-model="visiblePdf"
          title
          @ok="handleOkPdf"
          :footer="null"
          :maskClosable="false"
          width="1080px"
          top="10px"
          :bodyStyle="{textAlign:'center'}"
          v-if="visiblePdf"
          key="modalpdf"
          class="pdfModal"
        >
          <embed width="1000" height="700" :src="this.pdfUrl" type />
        </a-modal>
      </div>
    </a-spin>
  </div>
</template>

<script>
import moment from 'moment'
import { uploadOSS } from '@/utils/oss.js'
import {
  labourOrgAdd,
  labourOrgQuery,
  labourOrgGet,
  labourOrgDelete,
  labourOrgUpdate,
  contactAdd,
  teamGet,
  contactDelete,
  teamChargeGet,
  teamChargeSet
} from '@/api/laborUnitInfo'
const columns = [
  { title: '施工班组名称', dataIndex: 'name', key: 'name', align: 'center' },
  { title: '班组长', dataIndex: 'leader', key: 'leader', align: 'center' },
  { title: '在场人数', dataIndex: 'personTotal', key: 'personTotal', align: 'center' },

  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center'
  }
]
const tabdata = [
  {
    key: '1',
    name: '下构一队下构一队下构一队',
    proName: '张三',
    proCode: '12'
  },
  {
    key: '2',
    name: '下构一队',
    proName: '张三',
    proCode: '12'
  }
]
const listData = [
  {
    title: '江苏路通建筑劳务有限公司',
    group: '4',
    person: '43',
    check: true
  },
  {
    title: '江苏路通建筑劳务有限公司',
    group: '4',
    person: '43',
    check: false
  },
  {
    title: '江苏路通建筑劳务有限公司',
    group: '4',
    person: '43',
    check: false
  },
  {
    title: '江苏路通建筑劳务有限公司',
    group: '4',
    person: '43',
    check: false
  }
]
export default {
  data() {
    let subcontract = (rule, value, callback) => {
      if (this.isUpload1 == false) {
        callback(new Error('请上传文件'))
      } else {
        this.$refs.ruleForm.validateField('subcontract')
        callback()
      }
    }
    let paymentContract = (rule, value, callback) => {
      if (this.isUpload2 == false) {
        callback(new Error('请上传文件'))
      } else {
        this.$refs.ruleForm.validateField('paymentContract')
        callback()
      }
    }

    return {
      list: [],
      list2: [],
      formUnit: {
        name: '',
        creditCode: '',
        type: '',
        manager: '',
        contractStartDate: '',
        contractEndDate: '',
        contractFileInfoList: '',
        paymentPackageIdFileInfoList: ''
      },
      columns,
      data: [],
      visible: false,
      visiblePdf: false,
      pdfUrl:'',
      value: 1,
      radioStyle: {
        display: 'block',
        height: '40px',
        lineHeight: '40px'
      },
      teamGroup: [],
      modalTitle: '关联班组',
      modalForm1: {
        type: [
          {
            key: '1',
            lable: '劳务分包'
          },
          {
            key: '2',
            lable: '专业分包'
          }
        ],
        time: [moment('2021-02-02'), moment('2021-10-10')],
        fileInfoList: [],
        fileInfoList2: [],
        typeValue: '',
        typeKey: '',
        defaultValue: {},
        creditCode: '',
        manager: '',
        name: ''
      },
      defaultFileList: [],
      defaultFileList2: [],
      uploadButton: '',
      // labelCol: { span: 7 },
      // wrapperCol: { span: 12 },
      isUpload1: false,
      isUpload2: false,
      flag: 'zzzzzz',
      rules: {
        name: [
          {
            required: true,
            message: '请输入单位名称',
            trigger: 'change'
          }
        ],
        subcontract: [{ required: true, validator: subcontract, trigger: 'change' }],
        paymentContract: [{ required: true, validator: paymentContract, trigger: 'change' }]
      },
      charge: [],
      modalForm2: {},
      modalForm3: {
        name: ''
      },
      total: {
        unit: '6',
        group: '8',
        person: '212'
      },
      isdelete: false,
      visibleDelete: false,
      formDelete: { content: '' },
      tabId: '',
      topInfo: {},
      spinning: true,
      spinningRight:false,
      groupId: '',
      selectData: '',
      selectLi:''
    }
  },
  mounted() {
    sessionStorage.setItem('orgId', '6f8c6758d9754e2b9eb2d74bcc312512')
    this.getUl()
  },
  methods: {
    moment,
     pdfModal(value) {
      // console.log(value);
      this.pdfUrl = value.fileUrl
      this.visiblePdf = true
    },
    handleOkPdf() {
      this.visiblePdf = false
    },
    getUl() {
      let data = {
        page: 0,
        size: 0
      }
      let list = []
      let check = false
      labourOrgQuery(data).then((res) => {
        // console.log(res.data.data)
        this.topInfo = res.data.data
        if (res.data.data.labourOrgVOList.length == 0) {
          this.total.unit = '0'
          this.total.group = '0'
          this.total.person = '0'
          this.list = []
          this.isdelete = true
        } else {
          // this.selectLi=res.data.data.labourOrgVOList[0].id
          res.data.data.labourOrgVOList.forEach((item, index) => {
            if( this.selectLi==''&&index==0){
              check=true
              this.getTable(item.id)
            }else if (item.id == this.selectLi) {
              check = true
              this.getTable(item.id)
            } else {
              check = false
            }
            list.push({ id: item.id, title: item.name, group: item.teamTotal, person: item.inPersonTotal, check: check })
          })
          this.list = list
          this.list2 = list
          // this.spinning = false
        }
      })
    },
    getTable(id) {
      this.spinningRight=true
      this.tabId = id
      this.data = []
      this.formUnit = {}
      labourOrgGet({ id: id }).then((res) => {
        res.data.data.contractStartDate = moment(res.data.data.contractStartDate).format('YYYY-MM-DD')
        res.data.data.contractEndDate = moment(res.data.data.contractEndDate).format('YYYY-MM-DD')
        this.formUnit = res.data.data
        // console.log(this.formUnit);

        this.formUnit.teamVOList.forEach((item) => {
          item.key = item.id
        })
        this.data = res.data.data.teamVOList
        this.spinning = false
        this.spinningRight=false
      })
    },

    confirm(text, record) {
      // console.log(text)
      this.onCancel(text)
    },
    cancel(e) {
      console.log(e)
      this.$message.error('取消')
    },
    timeChange(e) {
      // console.log(e)
      // console.log(this.modalForm1.time);
    },
    clickli(val) {
      this.list.forEach((item, index) => {
        if (item.id == val.id) {
          item.check = true
          this.selectLi=val.id
        } else {
          item.check = false
        }
      })
      this.getTable(val.id)
    },
    onShow(text, record) {
      this.$router.push({ path: '/realNameManage/laborPerson' })
    },
    onSet(text, record) {
      this.modalTitle = '设置班组负责人'
      this.groupId = text.id
      let data = {
        code: text.code,
        orgId: sessionStorage.getItem('orgId')
      }
      teamChargeGet(data).then((res) => {
        // console.log(res.data.data)
        let charge = res.data.data
        charge.forEach((item) => {
          item.label = item.id
          item.value = item.fullName
        })
        this.charge = charge
      })
      this.visible = true
    },
    onEdit(text, record) {
      this.modalTitle = '编辑班组'
      // console.log(record);
      this.groupId = text.id
      this.modalForm3.name = record.name
      this.visible = true
    },
    // 取消关联
    onCancel(text, record) {
      // console.log(text);
      let data = {
        labourOrgId: this.tabId,
        teamId: text.id
      }
      contactDelete(data).then((res) => {
        this.$message.destroy()
        this.$message.success('取消关联成功')
        this.getTable(this.tabId)
      })
    },
    handleMenu(e) {
      switch (parseInt(e.key)) {
        case 1:
          this.modalTitle = '编辑劳务单位'
          this.defaultFileList = []
          this.defaultFileList2 = []
          this.modalForm1.fileInfoList = []
          this.modalForm1.fileInfoList2 = []
          this.modalForm1.time = [moment('2021-02-02'), moment('2021-10-10')]
          this.formUnit.contractFileInfoList.forEach((item) => {
            let file = { uid: item.id, name: item.fileName, status: 'done', url: item.fileUrl }
            this.defaultFileList.push(file)
            this.modalForm1.fileInfoList.push(file)
          })
          this.formUnit.paymentPackageIdFileInfoList.forEach((item) => {
            let file = { uid: item.id, name: item.fileName, status: 'done', url: item.fileUrl }
            this.defaultFileList2.push(file)
            this.modalForm1.fileInfoList2.push(file)
          })
          // console.log( this.formUnit.type);
          let key
          if (this.formUnit.type == '劳务分包') {
            key = 1
          } else {
            key = 2
          }
          this.modalForm1.typeKey = key
          this.modalForm1.defaultValue = { key: this.formUnit.type }
          this.modalForm1.typeValue = this.formUnit.type
          this.modalForm1.creditCode = this.formUnit.creditCode
          this.modalForm1.manager = this.formUnit.manager
          this.modalForm1.name = this.formUnit.name
          this.visible = true
          break
        case 2:
          this.visibleDelete = true
          this.formDelete.content = ''
          break
        default:
          break
      }
    },
    checkDelete() {
      if (this.formDelete.content == this.formUnit.name) {
        labourOrgDelete({ id: this.tabId }).then((res) => {
          this.$message.success('删除成功')
          this.getUl()
          this.visibleDelete = false
        })
      } else {
        this.$message.error('内容输入错误')
      }
    },
    relationGroup() {
      this.modalTitle = '关联班组'
      let data = {
        orgId: sessionStorage.getItem('orgId')
      }
      teamGet(data).then((res) => {
        let teamGroup = res.data.data
        teamGroup.forEach((item) => {
          item.value = item.id
        })
        this.teamGroup = teamGroup
      })
      this.visible = true
    },
    newAdd() {
      this.modalTitle = '新建劳务单位'
      this.visible = true
    },
    clickConfirm() {
      switch (this.modalTitle) {
        case '关联班组':
          let data = {
            labourOrgId: this.tabId,
            teamId: this.value,
            orgId: sessionStorage.getItem('orgId')
          }
          contactAdd(data).then((res) => {
            this.visible = false
            this.getUl()
          })
          break
        case '设置班组负责人':
          let data2 = {
            id: this.groupId,
            leaderOrgPersonId: this.selectData
          }
          teamChargeSet(data2).then((res) => {
            this.visible = false
            this.getUl()
          })
          break

        case '编辑班组':
          let data3 = {
            id: this.groupId,
            name: this.modalForm3.name
          }
          teamChargeSet(data3).then((res) => {
            this.visible = false
            this.getUl()
          })
          break
        default:
          if (this.modalForm1.fileInfoList.length != 0) {
            this.isUpload1 = true
          }
          if (this.modalForm1.fileInfoList2.length != 0) {
            this.isUpload2 = true
          }
          this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              this.list = this.list2
              this.spinning = true
              this.isdelete = false
              this.total.unit = '6'
              this.total.group = '8'
              this.total.person = '212'
              let contractFileInfoList = []

              this.modalForm1.fileInfoList.forEach((item, index) => {
                contractFileInfoList.push({ fileName: item.name, fileUrl: item.url, id: item.uid })
              })
              this.visible = false
              // contractFileInfoList['fileName']=this.modalForm1.fileInfoList.name
              // contractFileInfoList['fileUrl']=this.modalForm1.fileInfoList.name
              let paymentPackageIdFileInfoList = []
              this.modalForm1.fileInfoList2.forEach((item, index) => {
                paymentPackageIdFileInfoList.push({ fileName: item.name, fileUrl: item.url, id: item.uid })
              })
              // paymentPackageIdFileInfoList['fileName']=this.modalForm1.fileInfoList2.name
              // paymentPackageIdFileInfoList['fileUrl']=this.modalForm1.fileInfoList2.name
              let data = {
                contractEndDate: this.modalForm1.time[1]._d,
                contractFileInfoList: contractFileInfoList,
                contractPackageId: contractFileInfoList[0].id,
                contractStartDate: this.modalForm1.time[0]._d,
                creditCode: this.modalForm1.creditCode,
                manager: this.modalForm1.manager,
                name: this.modalForm1.name,
                id: this.tabId,
                orgId: sessionStorage.getItem('orgId'),
                paymentPackageId: paymentPackageIdFileInfoList[0].id,
                paymentPackageIdFileInfoList: paymentPackageIdFileInfoList,
                type: this.modalForm1.typeKey
              }

              if (this.modalTitle == '新建劳务单位') {
                labourOrgAdd(data).then((res) => {
                  this.$message.success('新建成功')
                  this.getUl()
                })
              } else if (this.modalTitle == '编辑劳务单位') {
                labourOrgUpdate(data).then((res) => {
                  this.$message.success('编辑成功')
                  this.getUl()
                })
              }
            } else {
              return false
            }
          })
          break
      }
    },
    radioChange(e) {
      // console.log(this.value, e.target.value)
      // this.value=e.target.value
    },
    selectChange(value) {
      this.modalForm1.typeValue = value.key
      this.modalForm1.typeKey = value.key
      // console.log(value)
    },
    setGroupChange(value) {
      // console.log(value)
      this.selectData = value
    },
    popupScroll() {
      //   console.log('popupScroll');
    },
    handleRemove(file) {
      // console.log(file.uid)

      this.modalForm1.fileInfoList.forEach((item, index) => {
        if (file.uid == item.uid) {
          this.modalForm1.fileInfoList.splice(index, 1)
        }
      })
      if (this.modalForm1.fileInfoList.length != 0) {
        this.isUpload1 = true
      } else {
        this.isUpload1 = false
      }
    },
    handleRemove2(file) {
      this.modalForm1.fileInfoList2.forEach((item, index) => {
        if (file.uid == item.uid) {
          this.modalForm1.fileInfoList2.splice(index, 1)
        }
      })
      if (this.modalForm1.fileInfoList2.length != 0) {
        this.isUpload2 = true
      } else {
        this.isUpload2 = false
      }
    },
    beforeUpload(file) {
      // console.log(file)
      this.uploadButton = '分包合同'
      const reader = new FileReader()
      reader.readAsDataURL(file) // 读取图片文件
      // if (this.flag == true) {
      //   this.form.packageId = file.uid
      //   this.flag = false
      // }
      reader.onload = (data) => {
        //  console.log(file)
        this.uploadFile(data.target.result, file.name, file.uid)
      }
      this.isUpload1 = true
      this.$message.success(`${file.name} 上传成功`, 1)
      return false
    },
    beforeUpload2(file) {
      // console.log(file)
      this.uploadButton = '委托公司支付协议'
      const reader = new FileReader()
      reader.readAsDataURL(file) // 读取图片文件
      // if (this.flag == true) {
      //   this.form.packageId = file.uid
      //   this.flag = false
      // }
      // console.log(this.flag)

      reader.onload = (data) => {
        //  console.log(file)
        this.uploadFile(data.target.result, file.name, file.uid)
      }
      // console.log(1111111)

      this.isUpload2 = true
      this.$message.success(`${file.name} 上传成功`, 1)
      return false
    },
    uploadFile(base64Data, fileName, fileUid, packageId) {
      let blob = this.dataURLtoBlob(base64Data)
      let dir = 'lw/' + 'DO' + packageId + '/'
      uploadOSS(blob, fileName, dir).then((fileUrl) => {
        // console.log(fileUrl, fileName)
        let obj = { url: fileUrl, name: fileName, uid: fileUid }
        // console.log(this.uploadButton)

        if (this.uploadButton == '分包合同') {
          this.modalForm1.fileInfoList.push(obj)
        } else {
          this.modalForm1.fileInfoList2.push(obj)
        }
      })
    },

    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], {
        type: mime
      })
    }
  }
}
</script>

<style scoped lang='less'>
::v-deep .ant-btn-group > .ant-btn:first-child:not(:last-child) {
  display: none;
}
.top {
  text-align: center;
  color: #555;
  margin-bottom: 20px;
  background: #fff;
  padding: 30px 30px;
}
.top_content {
  flex: 1;
  border-right: 1px solid #ededed;
}
.top_content:last-of-type {
  border: none;
}
.top_content_content {
  color: #000;
  font-size: 30px;
  /* font-weight: 600; */
}
.left {
  width: 25%;
  border-right: 1px solid #ededed;
}
.right {
  width: 75%;
}
.left,
.right {
  background: #fff;
  min-height: 700px;
  padding: 15px 30px;
}
.left {
  padding: 15px 20px;
}
.list {
  ul,
  li {
    list-style: none;
  }
  ul {
    margin: 0;
    padding: 0 0px;
  }
}
.list_title {
  font-size: 18px;
  // font-weight: 600;
  color: black;
  text-align: left;
  padding: 10px 0 20px 0;
}
.list_content {
  //  text-align: left;
  font-size: 16px;
  font-weight: 400;
  color: #999;
  padding: 0 20px;
}
.li_content {
  margin-bottom: 10px;
  background: #fff;
  box-shadow: 0px 0px 4px #ccc;
  padding: 15px;
  border: 1px solid rgba(255, 251, 230, 0);
}

.li_content:hover {
  border: 1px solid #1890ff;
  cursor: pointer;
}
.activeLi {
  // border: 1px solid rgba(255, 251, 230, 0);
  background: #1890ff;
}
.activeTitle {
  color: #fff;
}
.activeContent {
  color: #fff;
}
.aform {
  background: #f5faff;
  padding: 10px 30px;
  margin-bottom: 20px;
}
.unitTitle {
  color: #000;
  font-size: 20px;
  line-height: 100%;
  margin-left: 20px;
  // text-align: left;
}
.tipWord {
  border: 1px solid rgba(255, 229, 143, 1);
  border-radius: 4px;
  background: rgba(255, 251, 230, 1);
  padding: 16px 20px;
  margin-bottom: 30px;
}
.aModal{
::v-deep .ant-modal-body {
  max-height: 500px;
  overflow: auto;
}
}


.aModal {
  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    /**/
  }
}
.aModal {
  ::-webkit-scrollbar-track {
    background: #f8f8f8;
    border-radius: 4px;
  }
}
.aModal {
  ::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 4px;
  }
}
.pdfModal {
  ::v-deep .ant-modal {
    width: 1080px !important;
    // top: 20px;
  }
}
.pdfModal ::v-deep .ant-modal-body {
  padding: 40px;
  text-align: center;
  height: 780px;
}
</style>